@mixin base-theme {
    --theme-color: #64ba8c; // 主题色
    --online-color: #21e88b;
}

@mixin light-theme {
    // 背景色
    --bg-color-1: #f5f5f5;
    --bg-color-2: #fff;
    --bg-color-3: #2e2e2e;
    --bg-color-4: rgba(0, 0, 0, 0.1);
    --bg-color-5: #f4f4f4;

    // 前景色
    --fg-color-1: #000;
    --fg-color-2: #999;
    --fg-color-3: #fff;
    --fg-color-4: #707070;

    --button-hover-color-1: rgba(0, 0, 0, 0.2);
    --button-active-color-1: rgba(0, 0, 0, 0.3);

    --border-color: rgba(0, 0, 0, 0.06);
    --selection-color: #488665;
}

@mixin dark-theme {
    --bg-color-1: #1a1a1a;
    --bg-color-2: #262626;
    --bg-color-3: #1a1a1a;
    --bg-color-4: rgba(255, 255, 255, 0.1);
    --bg-color-5: #1a1a1a;

    --fg-color-1: #fff;
    --fg-color-2: #999;
    --fg-color-3: #000;
    --fg-color-4: #dbdbdb;

    --button-hover-color-1: rgba(255, 255, 255, 0.2);
    --button-active-color-1: rgba(255, 255, 255, 0.3);

    --border-color: #313131;
    --selection-color: gray;
}

:root {
    @include base-theme;
}

@media (prefers-color-scheme: dark) {
    :root {
        @include dark-theme;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        @include light-theme;
    }
}
